<!--
 * @Author: ChunLai
 * @Date: 2023-07-25 13:54:50
 * @LastEditTime: 2025-09-05 08:54:06
 * @Description: 投保结果
 * @FilePath: \02.bldinsure\src\views\result\bill.vue
-->
<template>
  <div class="res_bill_page">
    <div class="wpx100">
      <img :src="`${imgUrlPath}/icons/ok2.png`" alt="" />
    </div>
    <div class="mode2">
      <p>
        订单号：<i class="ft18 ftw6">{{ orderNum }}</i>
      </p>
      <p v-if="contractNum !== ''">
        保单号：<i class="ft18 ftw6">{{ contractNum }}</i>
      </p>
      <p>
        尊敬的
        <b class="uline">{{ applicant.name }}</b>
        {{ applicant.sex == "1" ? "女士" : "先生" }}：
      </p>
      <p class="ti_2">
        您投保的
        <b class="uline">{{ proName }}</b>
        <b class="fw60">
          {{ insureFlag | orderStatusName }}
        </b>
        。
      </p>
      <p class="ft12" v-if="insureMsg">备注：{{ insureMsg }}</p>
    </div>
    <!-- <div class="mode3" @click="goDetail">订单详情</div> -->
    <!-- <div class="mode2">点击订单详情或到订单列表查询承保结果</div> -->
    <div class="mode3" @click="goHuiFang" v-if="showRevisit">回访</div>
    <ShareMask @close="showMask = false" v-if="showMask"></ShareMask>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { appOrderDetail } from "@/utils";
import { getOrderDetail } from "@/utils/functions.js";
import ShareMask from "./components/ShareMask";
export default {
  name: "BillResultPage",
  data() {
    return {
      insureMsg: "",
      insureFlag: "",
      contractNum: "",
      showMask: false,
    };
  },
  components: { ShareMask },
  computed: {
    ...mapGetters({
      applicant: "insert/applicant",
      riskInfo: "risks/showedRisks",
      revisitBtnLink: "page/revisitBtnLink",
    }),
    proName() {
      let res = "";
      if (this.riskInfo) {
        res = this.riskInfo[0].productName;
      }
      return res;
    },
    showRevisit() {
      let res = false;
      if (
        this.revisitBtnLink &&
        this.revisitBtnLink.includes(this.mainRiskCode)
      ) {
        if (["3"].includes(this.insureFlag)) {
          res = true;
        }
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.initPageDatas();
  },
  methods: {
    initPageDatas() {
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: this.apiComParams,
          apiName: "orderStatus",
          toast: true,
        })
        .then((data) => {
          if (data.code == "1") {
            this.insureFlag = data.orderStatus || "";
            this.insureMsg = data.orderRemark || "";
            this.getBillDetail();
          }
        });
    },
    getBillDetail() {
      getOrderDetail(this.apiComParams).then(({ data }) => {
        if (data.code == "1") {
          if (data.cont && data.cont.contractNum) {
            this.contractNum = data.cont.contractNum;
          }
        } else {
          this.$msAlert(data.msg);
        }
      });
    },
    goDetail() {
      appOrderDetail(this.orderNum, this.workNum);
    },
    goHuiFang() {
      this.showMask = true;
    },
  },
};
</script>

<style lang="less" scoped>
.res_bill_page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 70px 25px;
  background-color: #fff;

  .mode1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1px;
    color: #343434;
    margin-top: 14px;
  }

  .mode2 {
    font-size: 15px;
    color: #747474;
    margin-top: 14px;

    i {
      color: #e7a249;
    }

    p {
      margin-bottom: 6px;
      b {
        color: #333333;
        font-weight: 400;
        &.fw60 {
          font-weight: 600;
        }
      }
    }
  }

  .mode3 {
    width: 172px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    border-radius: 20px;
    margin-top: 14px;
    background: linear-gradient(90deg, #ff442b 0%, #cb1800 100%);
  }
}
.uline {
  text-decoration: underline;
}
</style>
